<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/1/12 0012
  Time: 下午 2:30
  To change this template use File | Settings | File Templates.
  预约分车微信端的页面
--%>
<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://jsptags.com/tags/navigation/pager" prefix="pg" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>学员自主约车</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="viewport" content="width=device-width"/>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport"
          content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <link href="<%=path%>/CSS/button.css" rel="stylesheet" type="text/css"/>
    <link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="<%=path%>/appAlert/common.css">
    <style>

        html {
            background: #ffffff;
        }

        .main, body {
            width: 100%;
            height: 550px;
            margin: 0;
            padding: 0;
            background: #ffffff;
        }

        .head {
            position: relative;
            width: 100%;
            height: 45px;
            line-height: 45px;
            background-color: #1B9AF7;
            border-color: #1B9AF7;
            color: #FFF;
            text-align: center;
        }

        .head span:first-child {
            padding-left: 7px;
            display: block;
            float: left;
            font-size: 15px;
        }

        .head span:last-child {
            padding-right: 57px;
        }

        .head span {
            text-align: center;
            font-size: 18px;
        }

        .rebtn {
            position: absolute;
            top: 20px;
            left: 35px;
        }

        .back {
            width: 100%;
            height: 100%;
            background-color: #ffffff;
        }

        .text1 {
            height: 40px;
            line-height: 40px;
            color: #BBBBBB;
            font-size: 13px;
            text-align: left;
            margin-left: 10px;
        }

        .text2 {
            background-color: #FFFFFF;
            width: 100%;
            height: 40px;
        }

        .fon1 {
            width: 20px;
            height: 20px;
            margin: 10px 10px;
            float: left;

        }

        .text2 .cfidcardno {
            border: none;
            zoom: 1;
            width: 70%;
            height: 30px;
            line-height: 30px;
            margin: 5px auto;
            font-size: 14px;
            float: left;
        }

        .cfidcardno {
            outline: none;
        }

        .text3 a:first-child {
            width: 85%;
        }

        .text3 {
            text-align: center;
            margin-top: 50px;
        }

        .swCar {
            width: 100%;
            height: 60px;
            margin-bottom: 40px;
        }

        .stuTitle {
            color: #444444;
            margin-top: 30px;
            text-align: center;
            width: 100%;
            height: 50px;
            font-size: 14px;
        }

        .stuTitle a {
            font-size: 15px;
            color: #00a4ac;
        }

        .swCar span {
            display: block;
            float: left;
            width: 50%;
            height: 55px;
            text-align: center;
            line-height: 55px;

        }

        .car.acctive {
            border-bottom: 3px solid #1B9AF7;
            color: #1B9AF7;
        }

        .car {
            border-bottom: 3px solid #cccccc;
        }

        .back-twoAndThree a {
            width: 100%;
            margin: 20px 0px;
        }

        .text1 strong {
            color: #57a0ff
        }

        .button {
            transition-duration: .003s;
        }

        .lcsj {
            text-align: center;
            margin-bottom: 80px
        }

        .lcjl {
            text-align: center;
            margin-bottom: 80px
        }

        .back2 .submit {
            position: fixed;
            bottom: 10px;
            width: 100%;
            text-align: center;
        }

        .back2 .submit a {
            position: relative;
            bottom: -10px;
            height: 40px;
            width: 90%;
            text-align: center;
        }

        .lcsj .lcsj-list {
            background: #ffffff;
            border: 1px solid #cccccc;
            color: #444444;
            font-size: 14px;
            margin-bottom: 15px;
            line-height: 35px;
            padding: 5px 0;
        }

        .lcsj-list.active {
            background: #ffffff;
            border: 1px solid #47a0ff;
            color: #47a0ff;
            font-size: 14px;
            margin-bottom: 15px;
            line-height: 35px;
            padding: 5px 0;
        }

        .lcjl .lcjl-list {
            background: #ffffff;
            border: 1px solid #cccccc;
            color: #444444;
            font-size: 14px;
            float: left;
            width: 40%;
            height: 60px;
            margin: 2% 4.7%;
        }

        .lcjl-list.active {
            background: #ffffff;
            border: 1px solid #47a0ff;
            color: #47a0ff;
            font-size: 14px;
        }

        .lcjl-list span {
            float: left;
        }

        .lcjl-list span:nth-child(1) {
            margin-top: 10px;
        }

        .lcjl-list span:nth-child(2) {
            margin-left: 35%;
            text-align: right;
        }

        .lcjl-list span:nth-child(3) {
            margin-left: 4px;
            text-align: left;
        }

        .lcjl-list span:first-child {
            width: 100%;
        }

        .ymactive {
            color: #d31515;
        }

        .stateimg img {
            width: 200px;
        }

        .stateimg {
            text-align: center;
            margin-top: 15%;
        }

        .textsuccess span {
            display: block;
            text-align: center;
        }

        .texterror span {
            display: block;
            text-align: center;
        }

        .textsuccess span {
            margin-top: 10px;
            color: #ccc;
            font-size: 14px;
        }

        .texterror span {
            margin-top: 10px;
            color: #ccc;
            font-size: 14px;
        }

        .textsuccess span:first-child {
            font-size: 16px;
            margin-top: 20px;
            color: #00a0e8;
        }

        .texterror span:first-child {
            font-size: 16px;
            margin-top: 20px;
            color: #e8457b;
        }

        .lcjltext span {
            color: #cccccc;
            font-size: 14px;
            text-align: center;
            display: block;
            margin-bottom: 10px;
        }

        #no_choose {
            background: #f1f2f4;
            color: #999999;
        }
    </style>
</head>
<body>
<div class="main">
    <%-- 选择教练 --%>
    <div class="head">
        <span><i class="fa fa-angle-left"></i> 返回</span>
        <span>选择教练</span>
    </div>
    <div class="back2">
        <c:if test="${empty  studentInitiativeCars}">
            <div style="text-align: center; color: #cccccc; margin-top: 40px;">无</div>
        </c:if>
        <c:if test="${!empty studentInitiativeCars}">
            <div class="text1" style="text-align: center;">
                <strong>请选择练车教练</strong>
            </div>

            <div class="lcjltext">
                <span>练车时间：${stratTime}-${endTime}</span>
            </div>
            <div class="lcjl">
                <c:forEach items="${studentInitiativeCars}" var="studentInitiativeCars">
                    <div class="lcjl-list" onclick="pitjlOn($(this))"
                         <c:if test="${studentInitiativeCars.yyrs >= studentInitiativeCars.cfqty}">id="no_choose"</c:if>>
                        <span>${studentInitiativeCars.coachName}</span>
                        <span>(${studentInitiativeCars.yyrs}/${studentInitiativeCars.cfqty})</span>
                        <c:if test="${studentInitiativeCars.yyrs >= studentInitiativeCars.cfqty}"><span
                                class="ymactive">已满</span></c:if>
                        <input type="hidden" name="coachid" value="${studentInitiativeCars.coachid}">
                    </div>
                </c:forEach>
            </div>
            <div class="submit">
                <a class="button button-3d button-primary button-rounded">提交</a>
            </div>
        </c:if>
    </div>
</body>
<script type="text/javascript" src="<%=path%>/JQuery/jquery-1.8.2.js"></script>
<script type="text/javascript" src="<%=path%>/appAlert/alertPopShow.js"></script>
<script type="text/javascript">
    $(function(){
        $('.lcjl-list[id!="no_choose"]:first-child').addClass('active');
    });
    $('.submit').click(function () {

        var coachid = $('.active').find("input").val();
        if (coachid == null) {
            setTimeout(function () {
                webToast("请选择教练后确定！", "bottom", 600);
            }, 300);
            return
        }

        $.ajax({
            url: '<%=path%>/DrivingSys/weixin/kmyy/add_Sharecarsubentry',
            type: "post",
            data: {'coachid': coachid},
            dataType: "json",
            success: function (res) {
                if (res != null) {
                    $('.main').html("<div class='head'>" +
                        " <span><i class='fa fa-angle-left'></i> 返回</span>" +
                        " <span>预约成功</span> </div> <div class='back2'> " +
                        "<div class='stateimg'> " +
                        "<img src='<%=path%>/images/WeChat/WxSuccess.png'> " +
                        "</div><div class='textsuccess'> <span>恭喜您预约成功!</span>" +
                        " <span>练车时间：" + res.endTime + "-" + res.stratTime + "</span> <span>教练：" + res.coachName + "</span> " +
                        "</div> <div class='submit'> " +
                        "<a href='<%=path%>/DrivingSys/weixin/kmyy/CalculateTimeKmyy?fid=" + res.lcsjfid + "' class='button button-3d button-primary button-rounded'>返回主页</a> </div> " +
                        "</div>");

                }
                else {
                    alert('您已成功报名，不能重复报名！')
                    location = '<%=path%>/DrivingSys/weixin/kmyy/CalculateTimeMain'
                }

            },
            error: function () {
                $('.main').html("<div class='head'>" +
                    " <span><i class='fa fa-angle-left'></i> 返回</span> <span>预约失败</span> </div>" +
                    " <div class='back2'> <div class='stateimg'> <img src='<%=path%>/images/WeChat/WxError.png'> </div>" +
                    " <div class='texterror'> <span>抱歉预约失败!请取消当前已经预约的练车！</span> </div> " +
                    "<div class='submit'> <a href='<%=path%>/DrivingSys/weixin/kmyy/CalculateTimeKmyy?fid=" + res.lcsjfid + "' class='button button-3d button-primary button-rounded'>返回主页</a> </div> " +
                    "</div>");
            }
        });

    })

    function pitjlOn(_this) {
        if ($(_this).attr('id') != 'no_choose') {

            $(".lcjl-list.active").removeClass("active");
            _this.addClass("active");
        }
    }
    $(document).on('click', '.head span:first-child', function () {
        window.history.back()

    })

</script>
</html>
